<template>
<div>
    <div class="dialog-wrap" >
        <div class="dialog-cover" v-if="isShow" @click="closeMyself"></div>
        <!--弹框的动画效果 -->
        <transition name="drop">
            <div class="dialog-content" v-if="isShow">
                <p class="dialog-close" @click="closeMyself">x</p>
                <!--使用插槽，进行插入html内容 -->
                <slot>empty</slot>
            </div>
        </transition> 
    </div>
</div>
</template>
<script>
export default {
    //父组件通过自定义:is-show，子组件使用props接受父组件传递的属性值
    props:{
        isShow:{
            type:Boolean,
            default:false
        }
    },
    data(){
        return {
           
        }
    },
    methods:{
        //子组件通过$emit来通知父组件更新状态
        closeMyself(){
            this.$emit('on-close')//父组件接受on-close的通知
        }
        
    }
}
</script>
<style scoped>
.drop-enter-active{transition:all .5s ease}
.drop-leave-active{transition:all .3s ease}
.drop-enter{transform:translateY(-500px)}
.drop-leave-active{transform:translateY(-500px)}
.dialog-wrap{position:fixed;width:100%;height:100%}
.dialog-cover{background:#000;opacity:.3;position:fixed;z-index:5;top:0;left:0;width:100%;height:100%}
.dialog-content{width:50%;position:fixed;max-height:50%;overflow:auto;background:#fff;top:20%;left:50%;margin-left:-25%;z-index:10;border:2px solid #464068;padding:2%;line-height:1.6}
.dialog-close{position:absolute;right:5px;top:5px;width:20px;height:20px;text-align:center;cursor:pointer}
.dialog-close:hover{color:#4fc08d}
</style>